<!-- 表单 -->

<template>
  <WebForm>
    <FormInput label="消息标题" bind="title" :max="20" required />

    <EasyRow col2>
      <FormRadio label="消息类型" bind="type" :dict="DICT.TYPE" @change="changeType" />
      <FormRadio label="消息置顶" bind="isTop" :dict="CORE.DICT.YES" />
    </EasyRow>

    <EasyRow col2>
      <FormRadio label="发布方式" bind="publishType" :dict="DICT.PUBLISH_TYPE" @change="changePublishType" />
      <FormTime v-if="one.publishType === 2" label="发布时间" bind="publishTime" future required />
    </EasyRow>

    <EasyRow col2>
      <FormRadio label="有效期" bind="validDateType" :dict="DICT.VALID_DATE" @change="changeValidDate" />
      <FormDateRange
        v-if="one.validDateType === 2"
        label="有效范围"
        bind="validDateStart, validDateEnd"
        future
        required
      />
    </EasyRow>

    <FormTreeMulti label="发布对象" bind="targets, targetsValue" :dict="CORE.ORGAN.DICT" join required />

    <FormSelect label="消息模板" bind="templateId" :dict="templateList" @change="changeTemplate(one.templateId)" />

    <FormRichText
      :key="one.templateId"
      label="发布内容"
      bind="content"
      folder="message"
      :disabled="!!one.templateId"
      required
    />
  </WebForm>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyForm',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixSelect('template', 'template_')],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 模板列表
     */
    templateList() {
      const { one, template_selectDict } = this
      return template_selectDict.filter((dict) => dict[3] === one.type)
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换消息类型
     */
    changeType() {
      this.one.content = ''
    },

    /**
     * 切换发布方式
     */
    changePublishType() {
      // 清除发布时间
      this.one.publishTime = 0
    },

    /**
     * 切换有效期
     */
    changeValidDate() {
      // 清除有效范围
      this.one.validDateStart = this.one.validDateEnd = 0
    },

    /**
     * 选择模板
     */
    changeTemplate(id) {
      if (CORE.isEmpty(id)) return

      const template = this.template_selectDict.find(item => item[0] === id)
      this.one.content = template[2]
    },
  },
}
</script>
